<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_con">

				<block v-if="hasLogin">
					<image class="user_img" :src="realUrl(userInfo.headimg)" @click="gotopage"
						data-url="/pages/my/userInfo"></image>
					<view class="user_msg">
						<view class="phone">
							<view class="p_txt">{{userInfo.email}}</view>
							<view class="tip">
								<view class="iconfont vip_i">&#xe688;</view>
								<view class="vip_t">{{userInfo.vip_level - 1}}</view>
							</view>
						</view>
						<view class="u_id"> <span>ID:{{userInfo.id}}</span>  
							<span style="margin-left: 4vw;">
								<span v-if="userInfo.wallet_type == 1">BNB</span>
								<span v-else-if="userInfo.wallet_type == 2">ETH</span>
								<span v-else-if="userInfo.wallet_type == 3">TRON</span>
							</span> 
						</view>
						
					</view>
				</block>
				<block v-else>
					<image class="user_img" src="/static/my/user_img.png" @click="gotopage"
						data-url="/pages/my/userInfo"></image>
					<view class="user_msg">
						<view class="phone">
							<view class="p_txt">{{$t('my.login')}}</view>
							<view class="tip">
								<view class="iconfont vip_i">&#xe688;</view>
								<view class="vip_t">0</view>
							</view>
						</view>
						<view class="u_id">ID：00000</view>
					</view>
				</block>

				<view class="lang">
					<picker @change="onLocaleChange" :value="l_index" :range="local_arr" range-key="txt">
						<label class="iconfont l_icon">&#xe79a;</label>
						{{local_arr[l_index].txt}}
					</picker>
				</view>
				<view class="msg" @click="gotopage" data-url="/pages/notice/notice">
					<view class="iconfont icon">&#xe615;</view>
					<view class="tip" v-if="hasLogin">{{msg_num}}</view>
					<view class="tip" v-else>0</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="banner_item">
				<image class="b_bg" src="/static/my/vip_bg.png"></image>
				<view class="b_con">
					<view class="b_c_txt">
						<view class="b_t1">{{$t('my.vip_title')}}</view>
						<view class="b_t2">{{$t('my.vip_text')}}</view>
					</view>
					<view class="b_c_btn" @click="gotopage" data-url="/pages/my/member">{{$t('my.vip_btn')}}</view>
				</view>
			</view>
			<view class="card total_item">
				<view class="card_tit">
					<view class="c_tit">
						{{$t('my.account')}}
						<block v-if="look">
							<label class="iconfont look" @click="lookChange">&#xe6b5;</label>
						</block>
						<block v-else>
							<label class="iconfont look" @click="lookChange">&#xe604;</label>
						</block>
					</view>
				</view>
				<view class="t_con">
					<view class="t_c_box" @click="gotopage" data-url="/pages/diamond/diamond">
						<view class="num">{{look ? userInfo.score||0 : '***'}}</view>
						<view class="txt">{{$t('my.diamond')}}</view>
					</view>
					<view class="t_c_box" @click="gotopage" data-url="/pages/bean/bean">
						<view class="num">{{look ? userInfo.gold||0 : '***'}}</view>
						<view class="txt">{{$t('my.bean')}}</view>
					</view>
				</view>
			</view>
			<view class="card balance_item" @click="gotopage" data-url="/pages/balance/balance">
				{{$t('my.balance')}}：<label class="num">{{look ? userInfo.user_money||0 : '***'}}</label>
				<view class="iconfont icon">&#xe70f;</view>
			</view>

			<view class="card person_item">
				<view class="p_box" @click="gotopage" data-url="/pages/my/likeList">
					<image class="p_img" src="/static/my/like.png" mode="widthFix" />
					<view class="p_txt">{{$t('my.favorite')}}</view>
				</view>
				<view class="p_box" @click="look_get_score" data-url="/pages/my/followerList">
					<image class="p_img" src="/static/my/follow.png" mode="widthFix" />
					<view class="p_txt">{{$t('一鍵領取')}}</view>
				</view>
				<view class="p_box" @click="gotopage" data-url="/pages/chase/movie_list">
					<image class="p_img" src="/static/my/watched.png" mode="widthFix" />
					<view class="p_txt">{{$t('my.watched')}}</view>
				</view>
				<view class="p_box" @click="gotopage" data-url="/pages/bean/beanCharge">
					<image class="p_img" src="/static/my/jd.png" mode="widthFix" />
					<view class="p_txt">{{$t('pages.bean_charge')}}</view>
				</view>
			</view>

			<view class="card menu_item">
				<view class="m_box" @click="gotopage" data-url="/pages/share/share">
					<view class="iconfont logo">&#xe6b9;</view>
					<view class="m_txt">{{$t('my.share')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
				<view class="m_box" @click="gotopage" data-url="/pages/my/team">
					<view class="iconfont logo">&#xe6b6;</view>
					<view class="m_txt">{{$t('my.team')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
				<view class="m_box" @click="gotopage" data-url="/pages/my/service">
					<view class="iconfont logo">&#xe693;</view>
					<view class="m_txt">{{$t('my.customer')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>

				<view class="m_box" @click="gotopage" data-url="/pages/diamond/diamondLeaderboard">
					<view class="iconfont logo">&#xe61d;</view>
					<view class="m_txt">{{$t('score.ranking')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>

				<view class="m_box" @click="gotopage" data-url="/pages/my/help">
					<view class="iconfont logo">&#xe6b7;</view>
					<view class="m_txt">{{$t('my.help')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
				<view class="m_box" @click="gotopage" data-url="/pages/my/set">
					<view class="iconfont logo">&#xe6b8;</view>
					<view class="m_txt">{{$t('my.set')}}</view>
					<view class="iconfont more">&#xe70f;</view>
				</view>
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				msg_num: 0,
				applicationLocale: '',
				l_index: 0,
				local_arr: [{
					lang: '',
					txt: ''
				}],
				diamond: '0.00',
				bean: '0.00',
				balance: '30.00',
				look: true,
				userInfo: {}
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onPullDownRefresh() {
			if (this.hasLogin) {
				uni.$emit('auto_update');
				this.get_msg_num();
				this.getMyData();
			}
			
		
			setTimeout(() => {
				this.showMsg(this.$t('system.tip30'));
				uni.stopPullDownRefresh();
			}, 1000);
		},

		onLoad() {
			let that = this;
			this.local_arr = [{
					lang: 'en',
					txt: this.$t('locale.en')
				},
				{
					lang: 'zh-Hant',
					txt: this.$t('locale.zh-hant')
				},
				{
					lang: 'jp',
					txt: this.$t('locale.jp')
				}
			]
			this.applicationLocale = uni.getLocale();
			//判断语言选中下标
			this.local_arr.forEach((item, index) => {
				if (item.lang == this.applicationLocale) {
					that.l_index = index;
				}
			})
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			});
		},
		onShow() {
			if (this.hasLogin) {
				this.get_msg_num();
				this.getMyData();
			}
		},
		methods: {
			getMyData() {
				let url = this.site_url + 'api/index/getMyData';
				let param = {}
				this.areq(url, param, 'POST').then(res => {
					if (res.code == 1) {
						uni.setStorage({ //缓存用户登陆状态
							key: 'userInfo',
							data: res.data
						});
						this.userInfo = res.data
					}
				});
			},

			get_msg_num() {
				let url = this.site_url + 'api/auth/member/my_unread_num';
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.msg_num = res.data;
					}
				})
			},
			gotopage(e) {
				if (this.hasLogin) {
					this.$r(e.currentTarget.dataset.url);
				} else {
					this.showMsg(this.$t('system.tip4'));
					setTimeout(() => {
						this.$r('/pages/public/login');
					}, 1200)
				}
			},
			onLocaleChange(e) {
				this.l_index = e.detail.value;
				let code = this.local_arr[e.detail.value].lang;
				uni.setLocale(code);
				this.$i18n.locale = code;
				// #ifdef H5
				location.reload();
				// #endif
			},
			lookChange() {
				this.look = this.look ? false : true;
			},
			look_get_score() {
				let that = this
				let url = that.site_url + 'api/auth/play/look_get_score';
				that.areq(url).then(res => {
					if (res.code == 1) {
						that.getMyData();
						that.showMsg(that.$t('system.tip19'));
						return false;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 100%;
		position: fixed;
		z-index: 98;
		top: 0;
		padding: calc(var(--status-bar-height) + 16vw) 4% 5vw;
		background: $main_color2;

		.h_con {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;

			.user_img {
				width: 17vw;
				height: 17vw;
				border-radius: 17vw;
			}

			.user_msg {
				width: 60%;
				padding: 0 3vw;

				.phone {
					width: 100%;
					display: flex;
					align-items: center;

					.p_txt {
						font-size: 4.5vw;
						font-weight: bold;
						color: $main_color_s2;
						width: 100%;
						overflow: hidden;
						overflow-x: auto;
					}

					.tip {
						border: 2rpx solid $main_color_s;
						border-radius: 2vw;
						margin-left: 3vw;
						display: flex;
						align-items: center;
						line-height: 5vw;
						overflow: hidden;
						background: #fff;

						.vip_i {
							font-size: 3.2vw;
							width: 6vw;
							text-align: center;
							color: #fff;
							background: $main_color_s;
							border-radius: 0 1.5vw 1.5vw 0;
						}

						.vip_t {
							padding: 0 2vw;
							font-size: 3vw;
							font-weight: bold;
							color: #222;
						}
					}
				}

				.u_id {
					font-size: 3.5vw;
					padding-top: 2vw;
					color: $main_color4;
				}
				
				.u_id_coin {
					font-size: 3vw;
					padding-top: 2vw;
					color: $main_color4;
				}
				
			}

			.lang {
				position: absolute;
				z-index: 2;
				right: -4vw;
				bottom: 0.5vw;
				padding: 2vw;
				background: #fff;
				border-radius: 6vw 0 0 6vw;
				font-size: 3.8vw;
				color: #222;
				font-weight: bold;

				.l_icon {
					font-size: 4vw;
					margin-right: 1vw;
				}
			}

			.msg {
				position: absolute;
				z-index: 2;
				right: 2vw;
				top: -9vw;

				.icon {
					font-size: 6.5vw;
					font-weight: bold;
					color: $main_color5;
				}

				.tip {
					position: absolute;
					padding: 4rpx 1.5vw;
					background: $main_color_s2;
					color: #fff;
					font-size: 3vw;
					border-radius: 3vw;
					top: -1.4vw;
					left: 3.3vw;
				}
			}
		}
	}

	.bg_item {
		@include bg_item(90vw);
	}

	.main {
		width: 100%;
		position: relative;
		z-index: 2;
		padding: calc(var(--status-bar-height) + 39vw) 4% 0;

		.banner_item {
			position: relative;
			width: 100%;
			height: 18vw;
			border-radius: 3vw;
			overflow: hidden;

			.b_bg {
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 100%;
			}

			.b_con {
				position: relative;
				z-index: 2;
				width: 100%;
				height: 100%;
				padding: 0 4vw;
				display: flex;
				align-items: center;

				.b_c_txt {
					flex: 1;

					.b_t1 {
						width: 100%;
						font-size: 4.2vw;
						font-weight: bold;
						color: #FFD29F;
					}

					.b_t2 {
						font-size: 3.4vw;
						color: #FFFFFF;
						padding-top: 0.5vw;
					}
				}

				.b_c_btn {
					padding: 1.5vw 4vw;
					background: linear-gradient(90deg, #FEF8F0 0%, #FFE5CF 100%);
					color: #642B09;
					font-size: 3.5vw;
					font-weight: bold;
					border-radius: 6vw;
				}
			}
		}

		.card:not(:first-child) {
			margin-top: 3vw;
		}

		.card {
			@include card_style();

			.card_tit {
				width: 100%;
				display: flex;
				align-items: center;

				.c_tit {
					flex: 1;
					font-size: 4.3vw;
					font-weight: bold;
					color: $main_color5;
					line-height: 5vw;

					.look {
						margin-left: 4vw;
						color: $main_color4;
						font-size: 4.5vw;
						font-weight: 400;
					}
				}

				.icon {
					font-size: 3.4vw;
					color: $main_color4;
				}
			}
		}

		.total_item {
			.t_con {
				width: 100%;
				padding-top: 4vw;
				display: flex;
				align-items: center;

				.t_c_box:not(:first-child) {
					position: relative;

					&::before {
						content: '';
						position: absolute;
						height: 50%;
						width: 1rpx;
						background: #dcdcdc;
						left: 0;
						top: 25%;
					}
				}

				.t_c_box {
					flex: 1;
					text-align: center;

					.num {
						font-size: 6vw;
						color: $main_color_s2;
						font-weight: bold;
					}

					.txt {
						color: $main_color4;
						padding-top: 0.5vw;
						letter-spacing: 0.3vw;
						font-size: 3.3vw;
					}
				}
			}
		}

		.balance_item {
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 4.3vw;
			font-weight: bold;
			color: $main_color5;

			.num {
				flex: 1;
				font-size: 6vw;
				padding-left: 2vw;
				color: $main_color_s2;
			}

			.icon {
				font-size: 4vw;
				color: $main_color4;
				font-weight: 400;
			}
		}

		.person_item {
			display: flex;
			align-items: center;

			.p_box {
				flex: 1;
				text-align: center;
				padding-top: 1vw;

				.p_img {
					width: 8vw;
				}

				.p_txt {
					padding: 1vw 0;
					font-size: 3.6vw;
					font-weight: bold;
					color: $main_color5;
				}
			}
		}

		.menu_item {
			padding: 6vw 5vw;

			.m_box:not(:first-of-type):not(:last-of-type) {
				margin: 8vw 0;
			}

			.m_box {
				width: 100%;
				display: flex;
				align-items: center;

				.logo {
					font-size: 5vw;
					color: $main_color_s;
				}

				.m_txt {
					flex: 1;
					padding: 0 3vw;
					font-size: 4vw;
					font-weight: bold;
					color: $main_color5;
					letter-spacing: 3rpx;
				}

				.more {
					font-size: 3.6vw;
					color: #999;
				}
			}
		}
	}
</style>